<template>
  <component :is="tag" :class="textCls">
    <slot />
  </component>
</template>

<script lang="ts">
import Vue from 'vue'
import type { PropValidator } from 'vue/types/options'

type ITextType = 'primary' | 'success' | 'info' | 'warning' | 'danger' | ''
type ITextSize = 'large' | 'small' | ''

export default Vue.extend({
  name: 'VText',
  props: {
    type: {
      type: String,
      default: ''
    } as PropValidator<ITextType>,
    size: {
      type: String,
      default: ''
    } as PropValidator<ITextSize>,
    truncated: {
      type: Boolean,
      default: false
    },
    tag: {
      type: String,
      default: 'span'
    }
  },
  computed: {
    textCls(): unknown {
      return [
        'v-text',
        {
          [`v-text--${this.type}`]: this.type,
          [`v-text--${this.size}`]: this.size,
          [`is-truncated`]: this.truncated
        }
      ]
    }
  }
})
</script>

<style src="./style.css"></style>
